<div class="sim">
  <nz-spin
    nzSimple
    *ngIf="commonService.sliceMax === 0"
    class="position-center mt-2.5"
  />

  <div
    class="wallpaper"
    *ngIf="commonService.settings().simThemeImages.length > 0"
    [class.bootstrap]="commonService.settings().simThemeHeight < 260"
  >
    <app-swiper
      [images]="commonService.settings().simThemeImages"
      [autoplay]="commonService.settings().simThemeAutoplay"
      [height]="commonService.settings().simThemeHeight"
    />
  </div>

  <div class="bar" *ngIf="commonService.settings().simTitle">
    <h1 class="title text-[36px] lg:text-[40px]">
      {{ commonService.settings().simTitle }}
    </h1>
    <pre
      *ngIf="description"
      class="description dark-white"
      [innerHTML]="description | safeHtml"
    ></pre>
  </div>

  <div class="sim-component">
    <component-group></component-group>
  </div>

  <app-search class="hidden search-sm" />

  <div #parent class="top-nav dark-border-color dark-bg hidden md:block">
    <span
      #item
      *ngFor="
        let item of commonService.navs().slice(0, commonService.overIndex);
        let i = index;
        trackBy: commonService.trackByItem
      "
      [class.active]="commonService.oneIndex === i"
      [class.dark-text-active]="commonService.oneIndex === i"
      class="over-item dark-text"
      (click)="handleClickTop($event, item)"
    >
      {{ item.title }}
    </span>
    <!-- More -->
    <app-web-more-menu
      *ngIf="commonService.overIndex < commonService.navs().length"
      [data]="commonService.navs().slice(commonService.overIndex, 99999)"
      [index]="commonService.overIndex"
      [page]="commonService.oneIndex"
      (onClick)="commonService.handleClickClass($event)"
    />
  </div>

  <div class="wrapper">
    <div
      class="sidebar dark-bg hidden md:block"
      *ngIf="
        commonService.navs()[commonService.oneIndex]?.nav &&
        commonService.navs()[commonService.oneIndex].nav.length > 1
      "
    >
      <div
        *ngFor="
          let item of commonService.navs()[commonService.oneIndex].nav;
          let i = index;
          trackBy: commonService.trackByItem
        "
        (click)="commonService.handleClickClass(item.id)"
        [class.active]="commonService.twoIndex === i"
        [class.dark-item-active]="commonService.twoIndex === i"
        class="ripple-btn dark-text dark-hover"
      >
        {{ item.title }}
      </div>
    </div>

    <aside class="site-box dark-bg md:w-[0] w-full">
      <app-search class="max768none" />

      <div
        class="px-2.5 sticky top-0 left-0 z-10"
        *ngIf="commonService.currentList.length > 1"
      >
        <app-class-tabs [data]="commonService.currentList" />
      </div>

      <div *ngIf="commonService.currentList.length > 0; else noData">
        <div
          *ngFor="
            let item of commonService.currentList.slice(
              0,
              commonService.sliceMax
            );
            let i = index;
            trackBy: commonService.trackByItem
          "
        >
          <div class="nav-wrapper">
            <app-toolbar-title
              [dataSource]="item"
              (onCollapse)="commonService.onCollapse(item)"
            />

            <div
              class="px-3"
              [ngClass]="
                commonService.settings().simCardStyle === 'icon'
                  ? 'flex flex-wrap gap-x-6 gap-y-4'
                  : 'grid gap-x-4 gap-y-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
              "
              [class.hidden]="item['collapsed']"
            >
              <app-card
                *ngFor="
                  let el of item.nav;
                  trackBy: commonService.trackByItemWeb
                "
                [cardStyle]="commonService.settings().simCardStyle"
                [dataSource]="el"
                class="column-border"
              ></app-card>
            </div>
          </div>
        </div>
      </div>

      <ng-template #noData>
        <app-no-data></app-no-data>
      </ng-template>
    </aside>
  </div>
</div>

<app-sidebar class="md:hidden" />
<app-footer
  className="sim-footer"
  [content]="commonService.settings().simFooterHTML"
/>
<app-fixbar
  (onCollapse)="commonService.onCollapseAll()"
  [collapsed]="commonService.collapsed"
/>

<div class="sim-bg dark-bg"></div>
